<template>
    <div class="login-container">
        <h1>学生考勤管理系统</h1>
        <el-form :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.number" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const form = ref({
    number: '',
    password: ''
})

const userStore = useUserStore()
const router = useRouter()

const onSubmit = async () => {
    try {
        await userStore.login(form.value)
        router.push('/')
    } catch (error) {
        console.error(error)
    }
}
</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
}
</style>